<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
		<meta name="Author" content="SkyKiDS" />
		<meta name="Keywords" content="program, programming, javascript, html, xhtml, markup, stylesheet, css, application, 자바스크립트, 프로그램, 프로그래밍, 스타일시트, SkyKiDS, 스카이키즈, calculator, 계산기, brower, 브라우저, navigator, timer, clock, watch, date, day, 타이머, 시계, 스톱워치, test, 테스트, 검사, 확인, verify" />
		<meta name="Description" content="공부하는 SkyKiDS, 프로그래밍 편에서 자바스크립트로 만든 다양한 애플리케이션 및 자료를 볼 수 있습니다." />
		<title>공부하는 SkyKiDS, 프로그래밍 편</title>
		<style type="text/css">
		<!--
			img {border:0;}
		// -->
		</style>
		<script type="text/javascript">
		<!-- <![CDATA[
			var brKeyPress = 0;
			var brKeyDown = 0;

			function checkKeyPress(event) {
				document.getElementById("resultKeyPressIE").innerHTML += String.fromCharCode(event.keyCode) + " : " + event.keyCode + "&nbsp;&nbsp;&nbsp;";
				document.getElementById("resultKeyPressFF").innerHTML += String.fromCharCode(event.which) + " : " + event.which + "&nbsp;&nbsp;&nbsp;";
				document.getElementById("debugKeyPress").innerHTML += String.fromCharCode(event.charCode) + " : " + event.charCode + "&nbsp;&nbsp;&nbsp;";
				brKeyPress++;
				if((brKeyPress % 5) == 0) {
					document.getElementById("resultKeyPressIE").innerHTML += "<br />";
					document.getElementById("resultKeyPressFF").innerHTML += "<br />";
					document.getElementById("debugKeyPress").innerHTML += "<br />";
				}
			}

			function checkKeyDown(event) {
				document.getElementById("resultKeyDownIE").innerHTML += String.fromCharCode(event.keyCode) + " : " + event.keyCode + "&nbsp;&nbsp;&nbsp;";
				document.getElementById("resultKeyDownFF").innerHTML += String.fromCharCode(event.which) + " : " + event.which + "&nbsp;&nbsp;&nbsp;";
				document.getElementById("debugKeyDown").innerHTML += String.fromCharCode(event.charCode) + " : " + event.charCode + "&nbsp;&nbsp;&nbsp;";
				brKeyDown++;
				if((brKeyDown % 5) == 0) {
					document.getElementById("resultKeyDownIE").innerHTML += "<br />";
					document.getElementById("resultKeyDownFF").innerHTML += "<br />";
					document.getElementById("debugKeyDown").innerHTML += "<br />";
				}
			}

			function clearAll() {
				document.getElementById("resultKeyPressIE").innerHTML = "";
				document.getElementById("resultKeyPressFF").innerHTML = "";
				document.getElementById("debugKeyPress").innerHTML = "";

				document.getElementById("resultKeyDownIE").innerHTML = "";
				document.getElementById("resultKeyDownFF").innerHTML = "";
				document.getElementById("debugKeyDown").innerHTML = "";
			}


			document.onkeypress = function(e) {
				if (window.event) {
					var e = window.event;
					checkKeyPress(e);
				}
				else {
					checkKeyPress(e);
				}
			};
			document.onkeydown = function(e) {
				if (window.event) {
					var e = window.event;
					checkKeyDown(e);
				}
				else {
					checkKeyDown(e);
				}
			};

//			document.body.addEventListener("keypress", checkKeyPress(event), true);
//			document.body.addEventListener("keydown", checkKeyDown(event), true);

		// ]]> -->
		</script>
	</head>
	<body>
		<div id="wrapper">
			<h3 style="text-align:center;">공부하는 SkyKiDS, 프로그래밍 편</h3>
			<div id="googleAdsenseTop" style="text-align:center;">
				<script type="text/javascript"><!--
					google_ad_client = "pub-6916470664517841";
					//프로그래밍 편,728x90, 페이지 상단
					google_ad_slot = "4383592908";
					google_ad_width = 728;
					google_ad_height = 90;
				//--></script>
				<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
			</div>
			<div id="menu" style="margin:5px;">
				<table style="width:100%; border:1px solid black;">
					<tr>
						<td><a href="/apps/browserTest.html" title="브라우저의 속성 등을 알아볼 수 있습니다.">Test your navigator!</a></td>
						<td><a href="/apps/calculator.html" title="간단한 계산기입니다.">The calculator,</a></td>
						<td><a href="/apps/calculatorExtension.html" title="기능을 추가한 계산기입니다.">The extended calculator,</a></td>
						<td><a href="/apps/decreaseSecond.html" title="시계, 타이머, 스톱워치를 이용할 수 있습니다.">Use the Clock, Timer and Stopwatch</a></td>
					</tr>
					<tr>
						<td><a href="/apps/findKey.html" title="입력한 키를 알아보는 keyCode의 상위 버전입니다.">Check your key inputs(upgraded)!</a></td>
						<td><a href="/apps/keyCode.html" title="입력한 키를 알아볼 수 있습니다.">Check your key inputs!</a></td>
						<td><a href="/apps/readOnlyTest.html" title="입력 폼의 읽기 전용 속성을 시험할 수 있습니다.">Test the read-only property!</a></td>
						<td><a href="/apps/tagsPracticeNote.html" title="마크업 연습장입니다.">Test your markup, here!</a></td>
					</tr>
				</table>
			</div>
			<div id="contents">
				<div>
					<input type="button" value="Reset!" onclick="clearAll();" />
				</div>
				<div id="resultIE" style="width:100%;">
					W3C Recommendation + Microsoft Internet Explorer
					<table style="width:100%; border:1px solid black; text-align:center; vertical-align:top;">
						<tr>
							<th style="width:50%;">KeyPress event.keyCode</th><th style="width:10px;"></th>
							<th style="width:50%;">KeyDown event.keyCode</th>
						</tr>
						<tr>
							<td id="resultKeyPressIE"></td>
							<td></td>
							<td id="resultKeyDownIE"></td>
						</tr>
					</table>
				</div>
				<div id="resultFF" style="width:100%;">
					Mozilla Firefox
					<table style="width:100%; border:1px solid black; text-align:center;">
						<tr>
							<th style="width:50%;">KeyPress event.which</th>
							<th style="width:10px;"></th>
							<th style="width:50%;">KeyDown event.which</th>
						</tr>
						<tr>
							<td id="resultKeyPressFF"></td>
							<td></td>
							<td id="resultKeyDownFF"></td>
						</tr>
					</table>
				</div>
				<div id="debug">
					Debug
					<table style="width:100%; border:1px solid black; text-align:center;">
						<tr>
							<th style="width:50%;">KeyPress event.charCode</th>
							<th style="width:10px;"></th>
							<th style="width:50%;">KeyDown event.charCode</th>
						</tr>
						<tr>
							<td id="debugKeyPress"></td>
							<td></td>
							<td id="debugKeyDown"></td>
						</tr>
					</table>
				</div>
			</div>
			<p><a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Strict" height="31" width="88" /></a></p>
		</div>
	</body>
</html>
